<template>
    <div class="page">
        <div class="header">
            <div class="headerContent">
                <div >Hi，欢迎来到工程5188信息共享平台！</div>
                <div class="flex-start">
                    <div  @click="$router.push('/')"  style="cursor: pointer;">工程5188首页</div>
                    <div class="m-l-36"  @click="$router.push('/vipCenter')"  style="cursor: pointer;">服务中心</div>
                </div>
            </div>
        </div>
        <div class="headerCompany">
            <div class="headerCompanyContent">
                <div class="flex-start">
                    <div class="headerCompanyContenttitle">欢迎您：{{userInfo.company_name}}{{ userInfo.vip_start_time == '' ? '【普通会员】':''}}</div>
                    <div class="headerCompanyContenttitleVip" v-if="userInfo.vip_start_time == ''">立即开通VIP</div>
                </div>
                <div  class="flex-start">
                    <div class="lookItem" @click="$router.push('/companyInfo/index?shop_id='+userInfo.id)">
                        <img class="lookIcon"  src="@/static/engineering5188/supplier/look.png" alt="">
                        浏览网站
                    </div>
                    <div class="lookItem m-l-62"  style="cursor: pointer;"  @click="exit">
                        <img class="lookIcon"   src="@/static/engineering5188/supplier/exitx.png" alt="">
                        退出
                    </div>
                </div>
            </div>
        </div>
        <div class="pageContent">
            <div class="leftBar">
                <div class="menuItem">
                    <img class="logo" src="@/static/engineering5188/supplier/qiye.png" alt="">
                    <span class="menuItemTitle">供应商专区</span>
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/company', 'noactiveMenu':$route.path !== '/supplier/company' }"   @click="$router.push('/supplier/company')" >
                    公司资料
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/gongshang', 'noactiveMenu':$route.path !== '/supplier/gongshang' }"   @click="$router.push('/supplier/gongshang')">
                    工商资质
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/honer', 'noactiveMenu':$route.path !== '/supplier/honer' }"   @click="$router.push('/supplier/honer')">
                    企业荣誉
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/product', 'noactiveMenu':$route.path !== '/supplier/product' }"   @click="$router.push('/supplier/product')">
                    产品管理
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/engineeringManage', 'noactiveMenu':$route.path !== '/supplier/engineeringManage' }"   @click="$router.push('/supplier/engineeringManage')">
                    工程案例
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/companyAlbums', 'noactiveMenu':$route.path !== '/supplier/companyAlbums' }"   @click="$router.push('/supplier/companyAlbums')">
                    公司相册
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/companyVIdeo', 'noactiveMenu':$route.path !== '/supplier/companyVIdeo' }"   @click="$router.push('/supplier/companyVIdeo')">
                    公司视频
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/concat', 'noactiveMenu':$route.path !== '/supplier/concat' }"   @click="$router.push('/supplier/concat')">
                    联系方式
                </div>
                <div class="menuItem">
                    <img class="logo" src="@/static/engineering5188/supplier/person.png" alt="">
                    <span class="menuItemTitle">账号管理</span>
                </div>
                <div :class="{'activeMenu':$route.path === '/supplier/modifyPassword', 'noactiveMenu':$route.path !== '/supplier/modifyPassword' }"   @click="$router.push('/supplier/modifyPassword')">
                    修改密码
                </div>
                
                
            </div>

            <div class="right">
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    computed: {
        ...mapState([
          "userInfo",
        ]),
    },
    data(){
        return{}
    },
    created(){
        console.log(this.userInfo)
    },
    methods:{
        exit(){
            this.$store.commit("clear_loginInfo");
            alertSucc("已退出登录");
            this.$router.push("/");
        },
    }
}
</script>



<style scoped lang="less">
.page{
    width:100%;
    height:100%;
    background-color:  #F6F6F6;
    .header{
        width:100%;
        height:36px;
        background: #F6F6F6;
    }
    .headerContent{
        width:1200px;
        height:100%;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
    }

    .flex-start{
        display: flex;
        align-items: center;
    }
    .m-l-36{
        margin-left:36px;
    }

    .headerCompany{
        height: 80px;
        background: #31A41B;
    }

    .headerCompanyContent{
        width:1200px;
        height:100%;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .headerCompanyContenttitle{
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #FFFFFF;
    }

    .headerCompanyContenttitleVip{
        width: 112px;
        height: 36px;
        background: #EAF6E8;
        border: 1px solid #31A41B;
        font-weight: 500;
        font-size: 14px;
        color: #31A41B;
        text-align: center;
        line-height: 36px;
        border-radius: 20px;
    }

    .lookIcon{
        width:20px;
        height:20px;
    }
    .lookItem{
        color: #FFFFFF;
        font-weight: 600;
        font-size: 18px;
        cursor: pointer;
    }
    .m-l-62{
        margin-left:62px;
    }

    .pageContent{
        width:1200px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        margin-top:20px;

        .leftBar{
            width: 220px;
            height: 698px;
            background: #FFFFFF;
            border-radius: 0px 0px 0px 0px;

            .logo{
                width:24px;
                height:24px;
            }

            .menuItem{
                height: 55px;
                padding-left:16px;
                display: flex;
                align-items: center;
            }
            .menuItemTitle{
                font-weight: bold;
                font-size: 16px;
                color: #333333;
                line-height: 21px;
                margin-left:6px;
            }

            .activeMenu{
                height: 40px;
                padding-left:46px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #041E3A;
                background:#F2F9F0;
                display: flex;
                align-items: center;
                border-left: 4px solid #31A41B;
                cursor: pointer;
            }
            .noactiveMenu{
                height: 40px;
                padding-left:46px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #666666;
                background:#fff;
                display: flex;
                align-items: center;
                border-left: 4px solid #fff;
                cursor: pointer;
            }
        }

        .right{
            width: 960px;
            background: #FFFFFF;
        }
    }
}

</style>